<template>
    <ContentWrap>
        <CardTitle title="ImageViewer 使用" />
        <code class="code-block mt-20px" >
            &lt;ImageViewer :urlList="imageList" /&gt;<br/>
            &lt;ImageViewer :urlList="imageList" :initialIndex="0" :infinite="true" /&gt;<br/>
            &lt;img @click="showViewer" src="thumbnail.jpg" style="cursor: pointer" /&gt;
        </code>
        <CardTitle title="ImageViewer 代码示例" />
        <pre class="code-block">
            <code>
&lt;script setup lang="ts"&gt;
import { ref } from 'vue'

const imageList = ref([
    'https://example.com/image1.jpg',
    'https://example.com/image2.jpg',
    'https://example.com/image3.jpg'
])

const showViewer = () => {
    // 通过 createImageViewer 函数调用
    createImageViewer({
        urlList: imageList.value,
        initialIndex: 0
    })
}

&lt;/script&gt;
            </code>
        </pre>
        <CardTitle title="ImageViewer 属性" />
        <table class="properties-table mt-20px">
            <thead>
                <tr>
                    <th>属性</th>
                    <th>类型</th>
                    <th>默认值</th> 
                    <th>说明</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>urlList</td>
                    <td>Array</td>
                    <td>[]</td>
                    <td>图片列表</td>
                </tr>
                <tr>
                    <td>zIndex</td>
                    <td>number</td>
                    <td>200</td>
                    <td>z-index</td>
                </tr>
                <tr>
                    <td>initialIndex</td>
                    <td>number</td>
                    <td>0</td>
                    <td>初始索引</td>
                </tr>
                <tr>
                    <td>infinite</td>
                    <td>boolean</td>
                    <td>true</td>
                    <td>是否无限循环</td>
                </tr>
                <tr>
                    <td>hideOnClickModal</td>
                    <td>boolean</td>
                    <td>false</td>
                    <td>点击遮罩关闭</td>
                </tr>
                <tr>
                    <td>appendToBody</td>
                    <td>boolean</td>
                    <td>false</td>
                    <td>是否追加到body</td>
                </tr>
                <tr>
                    <td>show</td>
                    <td>boolean</td>
                    <td>false</td>
                    <td>是否显示</td>
                </tr>
            </tbody>
        </table>
        
        <CardTitle title="ImageViewer 方法" />
        <table class="properties-table mt-20px">
            <thead>
                <tr>
                    <th>方法名</th>
                    <th>参数</th>
                    <th>说明</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>createImageViewer</td> 
                    <td>options: Object</td>
                    <td>创建图片查看器实例</td>
                </tr>
            </tbody>
        </table>
        
        <CardTitle title="ImageViewer 示例" />
       <div class="mt-20px">
            <div class="demo-section">
                <h4>基础用法</h4>
                <p class="demo-desc">点击图片预览</p>
                <div class="image-gallery">
                    <img 
                        v-for="(image, index) in basicImages" 
                        :key="index"
                        :src="image"
                        @click="showBasicViewer(index)"
                        class="thumbnail"
                        alt="示例图片"
                    />
                </div>
            </div>
            
            <div class="demo-section">
                <h4>不同尺寸图片</h4>
                <div class="image-gallery">
                    <img 
                        v-for="(image, index) in differentSizeImages" 
                        :key="index"
                        :src="image"
                        @click="showDifferentSizeViewer(index)"
                        class="thumbnail"
                        alt="不同尺寸图片"
                    />
                </div>
            </div>
            
            <div class="demo-section">
                <h4>单张图片预览</h4>
                <div class="single-image-demo">
                    <img 
                        :src="singleImage"
                        @click="showSingleViewer"
                        class="single-thumbnail"
                        alt="单张图片"
                    />
                    <EButton @click="showSingleViewer">预览图片</EButton>
                </div>
            </div>
            
            <div class="demo-section">
                <h4>自定义配置</h4>
                <div class="config-demo">
                    <div class="config-controls">
                        <label>
                            <input type="checkbox" v-model="customConfig.infinite" />
                            无限循环
                        </label>
                        <label>
                            <input type="checkbox" v-model="customConfig.hideOnClickModal" />
                            点击遮罩关闭
                        </label>
                        <label>
                            缩放倍率:
                            <input 
                                type="number" 
                                v-model.number="customConfig.zoomRate" 
                                step="0.1" 
                                min="1"
                                max="3"
                                class="zoom-input"
                            />
                        </label>
                    </div>
                    <div class="image-gallery">
                        <img 
                            v-for="(image, index) in customImages" 
                            :key="index"
                            :src="image"
                            @click="showCustomViewer(index)"
                            class="thumbnail"
                            alt="自定义配置图片"
                        />
                    </div>
                </div>
            </div>
            
            <div class="demo-section">
                <h4>网络图片示例</h4>
                <p class="demo-desc">使用网络图片链接</p>
                <div class="network-images">
                    <EButton @click="showNetworkViewer">预览网络图片</EButton>
                    <div class="image-info">
                        <p>图片数量: {{ networkImages.length }} 张</p>
                        <p>支持缩放、旋转、切换等操作</p>
                    </div>
                </div>
            </div>
            
            <!-- <div class="demo-section">
                <h4>错误处理</h4>
                <div class="error-demo">
                    <img 
                        src="/invalid-image-url.jpg"
                        @click="showErrorViewer"
                        @error="handleImageError"
                        class="thumbnail error-thumbnail"
                        alt="错误图片"
                    />
                    <EButton @click="showErrorViewer">预览错误图片</EButton>
                    <p class="demo-result">{{ errorMessage }}</p>
                </div>
            </div> -->
       </div>
    </ContentWrap>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { createImageViewer } from '../../src/index'

// 基础图片列表
const basicImages = ref([
    'https://picsum.photos/800/600?random=1',
    'https://picsum.photos/800/600?random=2',
    'https://picsum.photos/800/600?random=3',
    'https://picsum.photos/800/600?random=4'
])

// 不同尺寸图片
const differentSizeImages = ref([
    'https://picsum.photos/400/300?random=5',
    'https://picsum.photos/800/1200?random=6',
    'https://picsum.photos/1200/800?random=7',
    'https://picsum.photos/600/600?random=8'
])

// 单张图片
const singleImage = ref('https://picsum.photos/800/600?random=9')

// 自定义配置图片
const customImages = ref([
    'https://picsum.photos/800/600?random=10',
    'https://picsum.photos/800/600?random=11',
    'https://picsum.photos/800/600?random=12'
])

// 网络图片
const networkImages = ref([
    'https://picsum.photos/800/600?random=13',
    'https://picsum.photos/800/600?random=14',
    'https://picsum.photos/800/600?random=15',
    'https://picsum.photos/800/600?random=16',
    'https://picsum.photos/800/600?random=17'
])

// 自定义配置
const customConfig = ref({
    infinite: true,
    hideOnClickModal: false,
    zoomRate: 1.2
})

// 错误信息
const errorMessage = ref('')

const showBasicViewer = (index: number) => {
    // 注意：这里使用 createImageViewer 函数
    // 实际使用时需要确保该函数已正确导入
    createImageViewer?.({
        urlList: basicImages.value,
        initialIndex: index,
        infinite: true
    })
}

const showDifferentSizeViewer = (index: number) => {
    createImageViewer({
        urlList: differentSizeImages.value,
        initialIndex: index,
        infinite: true
    })
}

const showSingleViewer = () => {
    createImageViewer({
        urlList: [singleImage.value],
        initialIndex: 0
    })
}

const showCustomViewer = (index: number) => {
    createImageViewer({
        urlList: customImages.value,
        initialIndex: index,
        infinite: customConfig.value.infinite,
        hideOnClickModal: customConfig.value.hideOnClickModal,
    })
}

const showNetworkViewer = () => {
    createImageViewer?.({
        urlList: networkImages.value,
        initialIndex: 0,
        infinite: true
    })
}

const showErrorViewer = () => {
    createImageViewer?.({
        urlList: ['/invalid-image-url.jpg'],
        initialIndex: 0
    })
}

const handleImageError = (event: Event) => {
    errorMessage.value = '图片加载失败，但仍可预览'
    const target = event.target as HTMLImageElement
    target.src = ''
}
</script>

<style lang="scss" scoped>
.demo-section {
    margin-bottom: 30px;
    padding: 20px;
    border: 1px solid #eee;
    border-radius: 6px;
    background: #fafafa;
    
    h4 {
        margin: 0 0 15px 0;
        color: #333;
        font-size: 16px;
    }
    
    .demo-desc {
        margin: 0 0 15px 0;
        color: #666;
        font-size: 14px;
    }
    
    .demo-result {
        margin: 10px 0 0 0;
        color: #666;
        font-size: 14px;
        font-family: monospace;
    }
}

.image-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 15px;
}

.thumbnail {
    width: 100%;
    height: 150px;
    object-fit: cover;
    border-radius: 6px;
    cursor: pointer;
    transition: transform 0.3s, box-shadow 0.3s;
    border: 2px solid transparent;
    
    &:hover {
        transform: scale(1.05);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        border-color: #409EFF;
    }
}

.single-image-demo {
    display: flex;
    align-items: center;
    gap: 20px;
    
    .single-thumbnail {
        width: 200px;
        height: 150px;
        object-fit: cover;
        border-radius: 6px;
        cursor: pointer;
        transition: transform 0.3s;
        
        &:hover {
            transform: scale(1.05);
        }
    }
}

.config-demo {
    .config-controls {
        display: flex;
        gap: 20px;
        margin-bottom: 20px;
        flex-wrap: wrap;
        
        label {
            display: flex;
            align-items: center;
            gap: 5px;
            font-size: 14px;
            
            input[type="checkbox"] {
                margin-right: 5px;
            }
            
            .zoom-input {
                width: 60px;
                padding: 2px 5px;
                border: 1px solid #ddd;
                border-radius: 3px;
                text-align: center;
            }
        }
    }
}

.network-images {
    .image-info {
        margin-top: 15px;
        padding: 15px;
        background: #f8f9fa;
        border-radius: 4px;
        
        p {
            margin: 5px 0;
            color: #666;
            font-size: 14px;
        }
    }
}

.error-demo {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    
    .error-thumbnail {
        border: 2px dashed #f56c6c;
        background: #fef0f0;
    }
}
</style> 